<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/9/20.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-index.css">


</head>
<body class="childrenBody">

<div class="sc_item" >
    <div class="row">
        <div class="col-lg-7 col-md-7 col-sm-12">
            <!--nav 部件-->
            <div class="nav_list_2">
                <div class="text_title">回答情况</div>
            </div>

            <div class="wk_gzt_list2" style="background-color: #ffffff;border-top: 0;margin-bottom: 0">
                <a href="javascript:;" class="wgl_item">
                    <p>数量总额</p>
                    <p class="wgl_title4">125万</p>
                </a>
                <a href="javascript:;" class="wgl_item">
                    <p>今日新增</p>
                    <p class="wgl_title4">67万</p>
                </a>
                <a href="javascript:;" class="wgl_item">
                    <p>浏览数量</p>
                    <p class="wgl_title4">2246</p>
                </a>
            </div>
            <div class="row" style="margin: 0 0 20px ;background-color: #ffffff">
                <div class="col-lg-12 col-md-12">
                    <div id="hd_map" style="height:362px;width: 100%;margin: 0 auto"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-md-5 col-sm-12">
            <!--nav 部件-->
            <div class="nav_list_2">
                <div class="text_title">系统环境</div>
            </div>
            <div class="row" style="margin: 0 0 20px ;background-color: #ffffff">
                <div class="col-lg-12 col-md-12">
                    <div id="xt_map" style="height:450px;width: 100%;margin: 0 auto"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list_2">
            <div class="text_title">
                地理位置
                <span>单位：条</span>
            </div>
        </div>
        <div style="background-color: #ffffff;margin-bottom: 20px;padding: 15px 10px;">
            <div id="dl_map" style="height:450px;width: 100%;margin: 0 auto"></div>
        </div>

    </div>
</div>
</body>






<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/js/zui.min.js"></script>
<script src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/echarts.min.js"></script>

<script type="text/javascript">

    window.addEventListener("resize", function () {
        /*重置图形*/
        dlChart.resize();
        xtChart.resize();
        hdChart.resize();
    })

    var dlChart = echarts.init(document.getElementById('dl_map'));
    var xtChart = echarts.init(document.getElementById('xt_map'));
    var hdChart = echarts.init(document.getElementById('hd_map'));


    xyOption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            bottom: '20' ,
            data: ['桌面设备','移动设备','其他设备']
        },
        series : [
            {
                name: '系统环境',
                type: 'pie',
                radius : '55%',
                center: ['50%', '45%'],
                color: ['#BBD3E4', '#EF6294', '#2895DA'],
                data:[
                    {value:335, name:'桌面设备'},
                    {value:310, name:'移动设备'},
                    {value:234, name:'其他设备'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    xtChart.setOption(xyOption);



    hdOption = {

        tooltip: {//鼠标悬浮弹出提示框
            trigger:'axis', //提示框弹出的触发时间，折线图和柱状图为axis
            formatter:"{a} <br/>{b} : {c} "//提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
        },
        grid: {//统计图距离边缘的距离
            top: '8%',
            left: '10%',
            right: '10%',
            bottom: '25%'
        },
        dataZoom: [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
                0
            ],
            bottom: 30,
            "start": 30,
            "end": 100,
            handleSize: '110%',
            handleStyle:{
                color:"#BAD6FD"

            },
            textStyle:{
                color:"#A0A8FE"},
            borderColor:"#BAD6FD"


        },{
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        xAxis: [{
            type: 'category',//数据类型为不连续数据
            boundaryGap: false,//坐标轴两边是否留白
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: '#233e64' //x轴颜色
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#A0A8FE'
                },
            },
            axisTick: { show: true,},//刻度点数轴
            data: ['2018.12.02', '2018.12.03', '2018.12.04', '2018.12.05', '2018.12.06', '2018.12.07', '2018.12.08']
        }],
        yAxis: [{//y轴的相关设置
            type: 'value'
        }],
        series: [{
            name: '回答情况',
            type: 'line',//统计图类型为折线图
            smooth: true, //是否平滑曲线显示
            symbolSize:0,//数据点的大小，[0,0]//b表示宽度和高度
            lineStyle: {//线条的相关设置
                normal: {
                    color: "#A0A8FE"   // 线条颜色
                }
            },
            areaStyle: { //区域填充样式
                normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0,  color: '#9795FE'},
                        { offset: 0.7,  color: '#F1FFFE'}
                    ], false),

                    shadowColor: '#A0A8FE', //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
            },
            data: [90, 105, 84, 125, 110, 92, 98]
        }]

    };
    hdChart.setOption(hdOption);




    /*地理位置*/
    qyOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data:['占比']
        },
        xAxis: [
            {
                type: 'category',
                data: ['广东','佛山','深圳','东莞','汕头','河源'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                axisLabel: {
                    formatter: ''
                }
            }
        ],
        series: [
            {
                name:'占比',
                type:'bar',
                label: {

                    normal: {
                        show: true,
                        position: 'top',
                        formatter: '{c}%',
                    }
                },
                color: '#616FDC',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
            }
        ]
    };
    dlChart.setOption(qyOption);





</script>

</body>
</html>